<template>
  <div class="article">
    <div class="switch wrapper">
      <div class="choose">
        <div class="recommend" @click="$emit('clickRecommend')">
          推荐 &nbsp;&nbsp;
        </div>
        <div class="newest" @click="$emit('clickNewest')">最新</div>
      </div>
      <div>
        <img src="../assets/InterviewLogo.png" alt="" />
      </div>
    </div>

    <div class="bigbox">
      <div
        class="item"
        @click="$router.push({ path: '/detail/' + item.id })"
        v-for="item in list"
        :key="item.id"
      >
        <div class="top">
          <!-- <div class="left">1</div> -->
          <img :src="item.creatorAvatar" alt="" />
          <div class="right">
            <div class="title">{{ item.stem }}</div>
            <div class="username">
              <span>{{ item.creatorName }}</span>
              <span>|</span>
              <span>{{ item.createdAt }}</span>
            </div>
          </div>
        </div>
        <div class="middle">
          {{ item.content }}
        </div>
        <div class="bottom">
          <span>点赞 {{ item.likeCount }}</span>
          <span>|</span>
          <span>浏览 {{ item.views }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入axios
import axios from "axios";
export default {
  name: "HmArticle",
  data() {
    return {
      list: [],
    };
  },

  // ====>>>>  这个组件我可以帮你缓存下来
  created() {
    // 这里请求 但是可能需要封装一下函数  直接调用函数即可
    this.getList();
    // alert('你好')
  },
  activated() {
    // console.log('每次页面激活 显示时触发')
    console.log("hello");
  },
  deactivated() {
    // console.log('每次页面失活 隐藏时触发')
  },
  methods: {
    async getList() {
      // 具体请求
      // https://mock.boxuegu.com/mock/3083/articles
      // get
      const res = await axios({
        url: "https://mock.boxuegu.com/mock/3083/articles",
      });
      // console.log(res.data.result.rows)
      this.list = res.data.result.rows;
    },
  },
};
</script>

<style lang="less" scoped>
.switch {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  background-color: #fff;

  .choose {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex: 1;
    margin-left: 20px;
  }

  img {
    width: 60px;
    height: 100%;
    margin-right: 20px;
  }
}

.bigbox {
  margin-top: 40px;
  margin-bottom: 50px;

  .item {
    padding: 10px;
    margin: 10px;
    border: 1px solid #000;

    .top {
      display: flex;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }

      .right {
        flex: 1;
      }
    }
  }
  // 超过两行显示省略号
  .middle {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
</style>
